<template>
	<view class="custom-nav" >
			<view class="icon-container" @click="msgCenter" >
				<image class="icon-image" src="/static/index/消息中心@2x.png" mode="aspectFit"></image>
			</view>
		<text class="nav-title">首页</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			//前往消息中心
			msgCenter() {
				uni.navigateTo({
					url: "/pages/CarMaintenance/WMessageCenter/WMessageCenter"
				})
			},
			
		}
	};
</script>

<style scoped>
	.custom-nav {
		width: 100%;
		height: 120rpx;
		position: fixed;
		z-index: 100;
		background-color: #1E90FF;
	
		display: flex;
		align-items: center;
		padding-top: 40rpx;

	}

	.icon-container {
		
		width: 40rpx;
		/* 图标宽度 */
		height: 40rpx;
		/* 图标高度 */
		margin-right: 10rpx;
		margin-top: 20rpx;
		margin: 20rpx 10rpx 0 20rpx;
		z-index: 200;
			/* 图标与标题之间的间距 */
		
	}

	.icon-image {
		width: 100%;
		/* 使图标适应容器 */
		height: 100%;
		/* 使图标适应容器 */
	}

	.nav-title {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		font-weight: bold;
		/* 标题字体大小 */
		color: white;
		/* 标题颜色 */
		font-size: 16px;
	}
</style>